<%@ page  contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="page" uri="http://www.forten.org/taglib/page"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="forten" uri="http://www.forten.org/taglib/forten"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人选课</title>
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="../styles/css/reset.css">
<link type="text/css" rel="stylesheet" href="../styles/css/index.css">
<link type="text/css" rel="stylesheet" href="../styles/css/button.css">
<script type="text/javascript" src="../scripts/html5.js"></script>
<!-- end -->
<!-- fancybox -->
<script>
	!window.jQuery
			&& document
					.write('<script src="../scripts/fancybox/jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript"
	src="../scripts/fancybox/jquery.fancybox-1.3.4.pack.js" charset="utf-8"></script>
<link media="screen" type="text/css" rel="stylesheet"
	href="../scripts/fancybox/jquery.fancybox-1.3.4.css">
<!-- end -->
<!-- 日期控件 -->
<script type="text/javascript" src="../scripts/Calendar/Js/calendar.js"></script>
<link type="text/css" rel="stylesheet"
	href="../scripts/Calendar/Css/calendar.css" />
<!-- end -->
</head>
<body>
	<c:if test="${! empty message}">
		<script type="text/javascript" language="javascript">
		 window.onload =function(){
			 var message = "${message}";
			 alert(message);
		 }
		</script>
	</c:if>
<style type="text/css">
.textarea {
	color: gray;
}
</style>
	<script type="text/javascript">
		$(document).ready(function() {
			<c:forEach items="${dto_choose}" var="dto_choose" varStatus="s_choose">
			$("#teacherName_kk${s_choose.index}").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			$("#name_kk${s_choose.index}").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			</c:forEach>
			
			<c:forEach items="${course4DownloadDtos}" var="dto4Download" varStatus="kj">
			$("#teacherName_kj${kj.index}").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			$("#name_kj${kj.index }").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			</c:forEach>
			<c:forEach items="${dto_chosen}" var="dto_chosen" varStatus="s_chosen">
			$("#teacherName_yx${s_chosen.index}").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			$("#teacherTime_yx${s_chosen.index}").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			$("#name_yx${s_chosen.index}").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			$("#leave_yx${s_chosen.index}").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			$("#cancelCourse${s_chosen.index }").fancybox({
				'titlePosition' : 'inside',
				'transitionIn' : 'none',
				'transitionOut' : 'none'
			});
			$("#leaveReason${s_chosen.index}").focus(function() {
				if ($(this).val() == "请输入请假原因")
					$(this).val("");
				$(this).removeClass("textarea");
			}).blur(function() {
				if ($(this).val() == "") {
					$(this).val("请输入请假原因");
					$(this).addClass("textarea");
				}
			});
			$("#cancelReason${s_chosen.index}").focus(function() {
				if ($(this).val() == "请输入退课原因")
					$(this).val("");
				$(this).removeClass("textarea");
			}).blur(function() {
				if ($(this).val() == "") {
					$(this).val("请输入退课原因");
					$(this).addClass("textarea");
				}
			});
			</c:forEach>
			
			$('<a href="#top" >返回顶部</a>').insertAfter('#table2');
			$('<a id="top" name="top"></a>').prependTo('body');
			
			$("#table1").hide();
			
				$(".rc_info h3").toggle(function(){
				     $(this).next(".rc_tab01").animate({height: 'toggle', opacity: 'toggle'}, "slow");
				   },function(){
				$(this).next(".rc_tab01").animate({height: 'toggle', opacity: 'toggle'}, "slow");
				   });
		});

		function doQuery() {
			var start = $('#start');
			var end = $('#end');
			if(start.val() == '' && end.val() !=''){
				alert('请选择您要查询上课时间的起始时间！');
			}
			document.frm1.action = "showCourseSelectionCadreList.jspx";
			document.frm1.submit();
		}
		function doSelect(courseId,cadreId){
			if(confirm("您正在执行该课程的选课课操作，您继续吗？")){
				var frm = document.frm2;
				frm.courseId.value = courseId;
				frm.cadreId.value = cadreId;
				
				frm.submit();
				//window.location.href = "selectCourse.jspx?courseId="+courseId+"&cadreId="+cadreId;
			}else{
				return false;
			}
		}
	</script>
	<header>
	<div class="headerWrap"></div>
	</header>

	<div class="content">

		<section>
		<div class="rc_fbt">
			<form:form id="frm1" name="frm1" method="post"
				action="showCourseSelectionCadreList.jspx"
				modelAttribute="courseSelectCadreQo">
				<span class="left">
				<span class="ml15 mr5 left">上课时间从</span>
					<form:input path="start" class="s_txt left mt13" 
					onclick="displayCalendar(this, 'yyyymmdd', this, false, '');"
										size="8" maxlength="8" readonly="true"/>
					<span class="ml15 mr5 left">至</span>
					<form:input path="end" class="s_txt left mt13" 
					onclick="displayCalendar(this, 'yyyymmdd', this, false, '');"
										size="8" maxlength="8" readonly="true"/>
				 <span class="ml15 mr5 left">课程名</span> <form:input
						path="name" class="s_txt left mt13" /> <span class="ml15 left">教师</span>
					<form:input path="teacherName" class="s_txt ml5 left mt13" /> <a
					class="btn_search ml10 left mt10" href="#" onclick="doQuery();">
				</a>
				</span>
				<span class="right mlr15">${cadreName }(${cadreNum}),您好！</span>
			</form:form>
		</div>
		<div class="rc_info">
			<h3>
				<span class="r_title_ico"></span> 可选课程信息
			</h3>
		</div>
		<div class="rc_fbt">
			<span style="color: white;">特别提示：课程资源宝贵，请您珍惜选课机会。每点击一次“选课”，无论事后是否退课、请假，均核减相应学时
			</span>
		</div>
		您每月最多可选修<span style="color: red;">${max }</span> 学时干部培训选学课程。您本月已选修<span
			style="color: red;">${currentCredit }</span>学时课程，还可选修<span
			style="color: red;">${sub}</span>学时，您下月已选修<span
			style="color: red;">${nextCredit }</span>学时课程，还可选修<span
			style="color: red;">${nextSub}</span>学时。
	<form action="selectCourse.jspx" name="frm2" id="frm2">		
						<input type="hidden" name="courseId" value="">
						<input type="hidden" name="cadreId" value="">
						<%-- <forten:token name="grxk" returnUrl="gotoCourseSelectionCadre.jspx"></forten:token> --%>
	</form>
		<table class="rc_tab01" cellspacing="0" cellpadding="0" >
			<tbody>
				<tr>
					<th style="width: 8%; text-align: center;">课程号</th>
					<th style="width: 18%; text-align: center;">课程名</th>
					<th style="width: 15%; text-align: center;">上课时间</th>
					<th style="width: 5%; text-align: center;">学分</th>
					<th style="width: 5%; text-align: center;">课容量</th>
					<th style="width: 6%; text-align: center;">选课人数</th>
					<th style="width: 8%; text-align: center;">教师</th>
					<th style="width: 15%; text-align: center;">选课结束时间</th>
					<th class="rc_cr" style="text-align: center;width: 6%">操作</th>
				</tr>
				<c:forEach items="${dto_choose }" var="dto_choose"
					varStatus="s_choose">
					
					<tr>
						<td style="text-align: center;<c:if test='${dto_choose.isOvertime == 1 }'>color: gray;</c:if> ">${dto_choose.num}</td>
						<td style="text-align: center;"><a
							id="name_kk${s_choose.index}" href="#inline1_kk${s_choose.index}"
							title="课程简介">${dto_choose.name}</a>
							<div style="display: none;">
								<div id="inline1_kk${s_choose.index }"
									style="width: 400px; height: 140px; overflow: auto; word-break: break-all;text-align: left;">
								<fieldset>${dto_choose.courseInfo}</fieldset></div>
							</div></td>
						<td style="text-align: center;<c:if test='${dto_choose.isOvertime == 1 }'>color: gray;</c:if>"><fmt:formatDate
								value="${dto_choose.teachTime }" pattern="yyyy年MM月dd日HH时mm分" />
						</td>
						<td style="text-align: center;<c:if test='${dto_choose.isOvertime == 1 }'>color: gray;</c:if>">${dto_choose.credit }</td>
						<td style="text-align: center;<c:if test='${dto_choose.isOvertime == 1 }'>color: gray;</c:if>">${dto_choose.classCapacity }</td>
						<td style="text-align: center;<c:if test='${dto_choose.isOvertime == 1 }'>color: gray;</c:if>">${dto_choose.classChosenNum }</td>
						<td style="text-align: center;"><a
							id="teacherName_kk${s_choose.index }"
							href="#inline2_kk${s_choose.index }" title="教师简介">${dto_choose.teacherName
								}</a>
							<div style="display: none;">
								<div id="inline2_kk${s_choose.index }"
									style="width: 400px; height: 140px; overflow: auto; word-break: break-all;text-align: left;">
									<fieldset>${dto_choose.teacherInfo }</fieldset></div>
							</div></td>
						<td style="text-align: center;<c:if test='${dto_choose.isOvertime == 1 }'>color: gray;</c:if>"><fmt:formatDate
								value="${dto_choose.endTimeChoose }" pattern="yyyy年MM月dd日HH时mm分" />
						</td>
						<td style="text-align: center;">
						
						<c:if test="${dto_choose.isOvertime == 0 }">
						<a href="#" onclick="doSelect('${dto_choose.id }','${cadreId}');">选课</a>
						</c:if>
						<c:if test="${dto_choose.coursewareQuantity != 0}">
							<a
							href="gotoDownloadCourseware.jspx?courseId=${dto_choose.id}" target="_blank">课件下载</a>
						</c:if>	
						</td>
					</tr>
				</c:forEach>
				
			</tbody>
		</table>
		<page:page hrefStr="showCourseSelectionCadreList.jspx" name="page"></page:page>
		
		<div class="rc_info" >
			<h3>
				<span class="r_title_ico"></span> 近七日已结束课程
			</h3>
		
		<table class="rc_tab01" cellspacing="0" cellpadding="0" id="table1">
			<tbody>
				<tr>
					<th style="width: 8%; text-align: center;">课程号</th>
					<th style="width: 18%; text-align: center;">课程名</th>
					<th style="width: 15%; text-align: center;">上课时间</th>
					<th style="width: 5%; text-align: center;">学分</th>
					<th style="width: 5%; text-align: center;">课容量</th>
					<th style="width: 6%; text-align: center;">选课人数</th>
					<th style="width: 8%; text-align: center;">教师</th>
					<th style="width: 15%; text-align: center;">选课结束时间</th>
					<th class="rc_cr" style="text-align: center;width: 6%">操作</th>
				</tr>

				<c:forEach items="${course4DownloadDtos }" var="dto4Download" varStatus="v">
				<tr>
					<td style="text-align: center;">${dto4Download.num}</td>
						<td style="text-align: center;">
						<a
							id="name_kj${v.index}" href="#inline1_kj${v.index}"
							title="课程简介">${dto4Download.name }</a>
							<div style="display: none;">
								<div id="inline1_kj${v.index }"
									style="width: 400px; height: 140px; overflow: auto; word-break: break-all;text-align: left;">
								<fieldset>${dto4Download.courseInfo}</fieldset></div>
							</div></td>
						<td style="text-align: center;"><fmt:formatDate
								value="${dto4Download.teachTime }" pattern="yyyy年MM月dd日HH时mm分" />
						</td>
						<td style="text-align: center;">${dto4Download.credit }</td>
						<td style="text-align: center;">${dto4Download.classCapacity }</td>
						<td style="text-align: center;">${dto4Download.classChosenNum }</td>
						<td style="text-align: center;">
						<a
							id="teacherName_kj${v.index }"
							href="#inline2_kj${v.index }" title="教师简介">${dto4Download.teacherName }
								</a>
							<div style="display: none;">
								<div id="inline2_kj${v.index }"
									style="width: 400px; height: 140px; overflow: auto; word-break: break-all;text-align: left;">
									<fieldset>${dto4Download.teacherInfo }</fieldset></div>
							</div>
						</td>
						<td style="text-align: center;"><fmt:formatDate
								value="${dto4Download.endTimeChoose }" pattern="yyyy年MM月dd日HH时mm分" />
						</td>
						<td style="text-align: center;">
						<c:if test="${dto4Download.coursewareQuantity != '0'}">
						<a href="gotoDownloadCourseware.jspx?courseId=${dto4Download.id}" target="_blank">课件下载</a>
						</c:if>
						</td>
				</tr>
				</c:forEach>
				
			</tbody>
		</table>
		</div>
		
		<div class="rc_info">
			<h3>
				<span class="r_title_ico"></span> 已选课程
			</h3>
		
		<table class="rc_tab01" cellspacing="0" cellpadding="0" id="table2">
			<tbody>
				<tr>
					<th style="width: 15%; text-align: center;">课程号</th>
					<th style="width: 18%; text-align: center;">课程名</th>
					<th style="width: 8%; text-align: center;">教师</th>
					<th style="width: 20%; text-align: center;">上课时间</th>
					<th style="width: 11%; text-align: center;">上课地点</th>
					<th style="width: 8%; text-align: center;">学时</th>
					<th class="rc_cr" style="text-align: center;">操作</th>
				</tr>
				<c:forEach items="${dto_chosen}" var="dto_chosen"
					varStatus="s_chosen">
					<tr>
						<td style="text-align: center;">${dto_chosen.courseDto.num}</td>
						<td style="text-align: center;"><a
							id="name_yx${s_chosen.index }"
							href="#inline1_yx${s_chosen.index }" title="已选课程简介">${dto_chosen.courseDto.name
								}</a>
							<div style="display: none;">
								<div id="inline1_yx${s_chosen.index }"
									style="width: 400px; height: 140px; overflow: auto; word-break: break-all;text-align: left;">
								<fieldset>${dto_chosen.courseDto.courseInfo }</fieldset></div>
							</div></td>

						<td style="text-align: center;"><a
							id="teacherName_yx${s_chosen.index }"
							href="#inline2_yx${s_chosen.index }" title="已选课程教师简介">${dto_chosen.courseDto.teacherName
								}</a>
							<div style="display: none;">
								<div id="inline2_yx${s_chosen.index }"
									style="width: 400px; height: 140px; overflow: auto; word-break: break-all;text-align: left;">
									<fieldset>${dto_chosen.courseDto.teacherInfo }</fieldset></div>
							</div></td>
						<td style="text-align: center;">
						<a
							id="teacherTime_yx${s_chosen.index }"
							href="#inline3_yx${s_chosen.index }" title="上课时间描述">
						<fmt:formatDate
								value="${dto_chosen.courseDto.teachTime }"
								pattern="yyyy年MM月dd日HH时mm分" /></a>
						<div style="display: none;">
								<div id="inline3_yx${s_chosen.index }"
									style="width: 400px; height: 80px; overflow: auto; word-break: break-all;text-align: left;">
								<fieldset>${dto_chosen.courseDto.teachTimeDescription }</fieldset></div>
						</div>		
						</td>
								
								
								
						<td style="text-align: center;">${dto_chosen.courseDto.classroom
							}</td>
						<td style="text-align: center;">${dto_chosen.courseDto.credit
							}</td>

						<td class="rc_cr" style="text-align: center;">
						<c:if test="${dto_chosen.courseDto.coursewareQuantity != '0'}">
						<a
							href="gotoDownloadCourseware.jspx?courseId=${dto_chosen.courseDto.id}" target="_blank">课件下载</a>
						</c:if>
						<c:if
								test="${dto_chosen.allowCancel==true}">
								<a id="cancelCourse${s_chosen.index }"
									href="#inline4_yx${s_chosen.index }" title="退课原因">退课</a>&nbsp;
							
						<div style="display: none;">
									<div id="inline4_yx${s_chosen.index}"
										style="width: 400px; height: 120px; overflow: auto; word-break: break-all;">
										<form action="cancelCourseByCadre.jspx" method="post">
											<input type="hidden" name="selectedCourseId"
												id="selectedCourseId" value="${dto_chosen.id }">
												<forten:token name="ccbc" returnUrl="gotoCourseSelectionCadre.jspx"></forten:token>
											<textarea rows="4" cols="30" name="cancelReason"
												id="cancelReason${s_chosen.index }" class="textarea" >请输入退课原因</textarea>
											<br> <input type="submit" value="确认" class="button">
										</form>
									</div>
								</div>
							</c:if><c:if test="${dto_chosen.allowLeave==true }">
								<a id="leave_yx${s_chosen.index}"
									href="#inline5_yx${s_chosen.index}" title="请假原因">请假</a>&nbsp;
								<div style="display: none;">
									<div id="inline5_yx${s_chosen.index}"
										style="width: 400px; height: 120px; overflow: auto; word-break: break-all;">
										<form action="leave.jspx" method="post">
											<input type="hidden" name="selectedCourseId"
												id="selectedCourseId" value="${dto_chosen.id }">
												<forten:token name="leave" returnUrl="gotoCourseSelectionCadre.jspx"></forten:token>
											<textarea cols="30" rows="4"
												id="leaveReason${s_chosen.index }" name="leaveReason"
												class="textarea">请输入请假原因</textarea>
											<br> <input type="submit" value="确定" class="button">
										</form>
									</div>
								</div>
							</c:if></td>
					</tr>
				</c:forEach>
				
			</tbody>
		</table>
		</div>
		</section>
		<!-- cont end -->
	</div>

<%@include file="/common/foot.jsp"%>